<template>
    <div class="user-info">
        <van-nav-bar title="个人信息" left-arrow @click-left="onClickLeft" />
        <input type="file" hidden ref="file" @change="onFileChange" />
        <van-cell title="头像" is-link @click="$refs.file.click()">
            <template #default>
                <van-image round class="avatar" fit="cover" :src="user.photo" />
            </template>
        </van-cell>
        <van-cell title="昵称" is-link :value="user.name" center @click="isNameShow = true" />
        <van-cell title="性别" is-link :value="(user.gender === 0 ? '男' : '女')" center @click="isGenderShow = true" />
        <van-cell title="生日" is-link :value="user.birthday" center @click="isBirthdayShow = true" />

        <van-popup v-model="isNameShow" position="bottom" :style="{ height: '100%' }">
            <UpdateName @close="isNameShow = false" v-model="user.name" v-if="isNameShow"></UpdateName>
        </van-popup>

        <van-popup v-model="isGenderShow" position="bottom">
            <UpdateGender @close="isGenderShow = false" v-model="user.gender" v-if="isGenderShow"></UpdateGender>
        </van-popup>

        <van-popup v-model="isBirthdayShow" position="bottom">
            <UpdateBirthday @close="isBirthdayShow = false" v-model="user.birthday" v-if="isBirthdayShow">
            </UpdateBirthday>
        </van-popup>

        <van-popup v-model="isPhotoShow" position="bottom" :style="{ height: '100%' }">
            <UpdatePhoto :img_src="img" @close="isPhotoShow = false" @updateNewPhoto="user.photo = $event"
                v-if="isPhotoShow">
            </UpdatePhoto>
        </van-popup>
    </div>
</template>

<script>
import { getUserProfile } from '../../api/user'
import UpdateName from './components/updateName.vue'
import UpdateGender from './components/updateGender.vue'
import UpdateBirthday from './components/updateBirthday.vue'
import UpdatePhoto from './components/updatePhoto.vue'

export default {
    name: 'UserInfo',
    data() {
        return {
            user: {},
            isNameShow: false,
            isGenderShow: false,
            isBirthdayShow: false,
            isPhotoShow: false,
            img: null
        }
    },
    created() {
        this.loadUserProfile()
    },
    methods: {
        onClickLeft() {
            this.$router.back()
        },
        async loadUserProfile() {
            try {
                const { data } = await getUserProfile()
                console.log(data);
                this.user = data.data
            } catch (err) {
                console.log('获取用户信息失败', err);
            }
        },
        onFileChange() {
            const file = this.$refs.file.files[0]
            console.dir(file)
            this.img = window.URL.createObjectURL(file)
            this.isPhotoShow = true
            this.$refs.file.value = ''
        }
    },
    components: {
        UpdateName,
        UpdateGender,
        UpdateBirthday,
        UpdatePhoto
    }
}
</script>

<style scoped lang="less">
.user-info {
    .avatar {
        width: 60px;
        height: 60px;
    }

    .van-popup {
        background-color: #f5f7f9;
    }
}
</style>